﻿@page "/chart/pyramid"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pyramid-chart'>Blazor Pyramid Chart</a> visualizes food comparison data by using pyramid series in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the pyramid chart. The pyramid chart is the form of a triangle with lines dividing it into sections, each section with a different width. Depending on the Y coordinates, this width indicates a level of hierarchy among other categories. <code>DataLabel</code> is used to represent individual data and its value.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the pyramid series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/pyramid/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfAccumulationChart Title="Food Comparison Chart" Theme="@Theme">
        <AccumulationChartLegendSettings Visible="false">
        </AccumulationChartLegendSettings>
        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@PyramidChartPoints" XName="Foods" YName="Calories" Type="AccumulationType.Pyramid" Width="45%" Height="80%"
                                     NeckWidth="15%" GapRatio="0.03" Name="Food" Explode="true">
                <AccumulationDataLabelSettings Visible="true" Position="AccumulationLabelPosition.Inside" Name="DataLabelMappingName">
                    <AccumulationChartDataLabelFont FontWeight="600"></AccumulationChartDataLabelFont>
                </AccumulationDataLabelSettings>
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
    </SfAccumulationChart>
</div>
@code{

    private Theme Theme { get; set; }
    public List<PyramidData> PyramidChartPoints { get; set; } = new List<PyramidData>
    {
          new PyramidData { Foods =  "Sweet Treats", Calories = 120, DataLabelMappingName = "120 cal" },
          new PyramidData { Foods =  "Milk, Youghnut, Cheese", Calories = 435, DataLabelMappingName = "435 cal" },
          new PyramidData { Foods =  "Vegetables", Calories = 470, DataLabelMappingName = "470 cal" },
          new PyramidData { Foods =  "Meat, Poultry, Fish", Calories = 475, DataLabelMappingName = "475 cal" },
          new PyramidData { Foods =  "Fruits", Calories = 520, DataLabelMappingName = "520 cal" },
          new PyramidData { Foods =  "Bread, Rice, Pasta", Calories = 930, DataLabelMappingName = "930 cal" },
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class PyramidData
    {
        public string Foods { get; set; }
        public double Calories { get; set; }
        public string DataLabelMappingName { get; set; }
    }
}

